<template>
  <div class="music"
         id="app">
        <!-- 头部 -->
        <Header @GetMusicList='StorageMusicList'></Header>
        <!-- 显示区域 -->
        <div class="main">
            <!-- 左侧歌曲列表 -->
            <SongList 
                :SongListObj='SongListObj'
                @ClickedSongId='StorageSongId'
                @ClickedSongUrl='StorageSongUrl'
                @isClick='isClick'
                @MvId='StorageMvId'>
            </SongList>
            <!-- 歌曲封面组件 -->
            <Cover :coverObj="coverObj"></Cover>
           
            <!-- 歌曲评论 -->
            <Comment :commentId='commentObj.id'></Comment>
        </div>
        <!-- mv播放 -->
        <playMv :MvId="MvObj.MvId"></playMv>
       
        <!-- 音频播放 -->
        <PlayAudio 
            :playAudioObj="playAudioObj" 
            @GetSongDuration="StorageSongDuration"
            @GetCurrentTime="StorageCurrentTime"
            @SongState='PlayAudioStroageSongState'>
        </PlayAudio>
    </div>
</template>

<script src='./Home.js'></script>

<style scoped>
body {
    background-color: #eee;
}

.music {
    width: 1200px;
    height: 600px;
    margin: auto;
    margin-top: 50px;
    box-shadow: 0 0 4px 0 rgba(9, 99, 99, .9);
}

/* 主题区域 */
.music .main {
    background-color: #fff;
    height: 80%;
    display: flex;
}

</style>